'use strict';

import ReactDOM from 'react-dom';
import React from 'react';
import { Layout, Breadcrumb, Icon, message } from 'antd';
const { Header, Footer, Sider } = Layout;
import {SideBar} from '../../lib/components/Sider/SideBar';
import {${className}Content} from './${className}Content';


class ${className} extends React.Component{
  constructor(props){
    super(props);
    this.state={collapsed: false}
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render(){
    return(
      <Layout>
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse} width='240'>
          <div className="logo" style={{height:'64px',background:'green'}}>logo</div>
          {/*修改 TODO*/}
          <SideBar current="5" openKeys="sub2"/>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }} >header</Header>

          <${className}Content />

          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©2016 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    );
  }
}
ReactDOM.render(
  <${className} />,
  document.getElementById("app")
);
